<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="../assets/css/vant.css" />
  <script src="../assets/js/vue.min.js"></script>
  <script src="../assets/js/axios.min.js"></script>
  <script src="../assets/js/vant.min.js"></script>
  <style>
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  </style>
</head>

<body>
  <div id="app">
    <van-space direction="vertical" fill>
      <van-nav-bar title="标题" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeList" :key="item">{{ item }}</van-swipe-item>
      </van-swipe>
      <van-grid :column-num="4">
        <van-grid-item v-for="item in gridList" :key="item.id" icon="photo-o" :text="item.test" />
      </van-grid>
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-card v-for="item in productList" :key="item" num="2" price="2.00" desc="描述信息" title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
      </van-list>
    </van-space>
  </div>

  <script>

    const { createApp } = Vue

    const app = createApp({
      data() {
        return {
          swipeList: [1, 2, 3, 4],
          gridList: [{
            id: 1,
            test: '测试'
          }, {
            id: 2,
            test: '测试'
          }, {
            id: 3,
            test: '测试'
          }, {
            id: 4,
            test: '测试'
          }, {
            id: 5,
            test: '测试'
          }, {
            id: 6,
            test: '测试'
          }, {
            id: 7,
            test: '测试'
          }, {
            id: 8,
            test: '测试'
          }],
          productList: [1, 2, 3, 4],
          test: "ces"
        }
      },
      async mounted() {
        const res = await axios.get('http://192.168.0.103:8080/test')
        const abc = res.data
        console.log('abc --- ', abc)
        this.test = abc
      },
      methods: {
        toChange() {
          this.test = '111'
        }
      }
    })
    app.use(vant).use(vant.Lazyload).mount('#app')
  </script>
</body>

</html>